<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>好玩网游-游戏网站浏览试玩-交易猫主页游戏账号租号充值Q币端游新游戏王者荣耀/和平精英等</title>
	<meta name="description" content="交易猫游戏网站,提供各种网游/端游/新游戏/推荐,发布,购买商品,非常多的乐趣游戏,满足游戏用户的需求,随便玩随便看" />
	<meta name="keywords" content="游戏网站,交易猫游戏网站,网页游戏,手机游戏,各种新游戏端游,满足用户游戏需求"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=1.0, user-scalable=yes" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="commonCSS/commonInitialize.css" />
	<link rel="stylesheet" href="commonCSS/div-loading1.css" />
	<!--正式的首页index.html的样式表-->
	<link rel="stylesheet" href="indexCss/index1.css" />
	<!--<link rel="stylesheet" href="indexCss/games-slide-list-carousel.css" />-->
	<!--关于使用火箭图片实现回到顶部的，一定要记得：引入相关的HTML标签元素，引入CSS样式表，引入相关的JavaScript文件！！！-->
	<link rel="stylesheet" href="commonCSS/scrollToTopAnimation.css" />
</head>
<body>
	
	<!--动画效果的div元素-->
	<div class="hide-loading">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
	<script src="indexJs/hideLoadingDiv-before.js"></script>
	<!--<script type="text/javascript">
		let loadingDiv1 = document.getElementsByClassName("hide-loading")[0];
		function showHideLoading(scrolltop = 0, flag = false) {
			if(flag) {
				loadingDiv1.classList.add("show-loading");
				loadingDiv1.style.top = scrolltop + "px";
				return;
			}
			loadingDiv1.classList.remove("show-loading");
		
		}
		window.onbeforeunload = function() {
			showHideLoading(0, true);
			loadingDiv1.classList.add("cover-body");
			window.onresize = function() {
				showHideLoading(0, true);
				loadingDiv1.classList.add("cover-body");
			}
		}
		window.onload = function() {
			showHideLoading(false);
			loadingDiv1.classList.remove("cover-body");
		}
		
	</script>-->
	<!--顶部盒子区域header开始-->
	<header id="games-header-area">
	
		<!--下载游戏App的div-->
		<div id="app-div"><a href="index.html"><img src="indexImg/img_download.9e983b0d.png" alt="download our games App" /></a></div>
		<!--装有搜索框的div盒子-->
		<div id="games-search-div">
			<div class="flex-justify-center">
				<div onclick="history.back();" class="games-icon" title="回退到上一个页面（back to last web page）">
					<span>◀</span>
				</div>
				<div class="input-search flex-justify-center">
					<input type="text" name="" placeholder="输入游戏、商品名" value="" />
					<button class="search-btn">搜索</button>
				</div>
			</div>
		</div>
		
	</header>
	<!--顶部盒子区域header结束-->
	<!--主体部分区域section开始-->
	<section id="games-section-area">
		<div class="games-service">
			<h1>游戏服务</h1>
		</div>
		<div class="games-user">
			<!--账号、租号、代练、礼包四个盒子区域-->
			<div class="games-user-center">
				<ul class="flex-horizontal flex-justify-space-around">
					<li><a href="">
							<img src="indexImg/TB1cPNIHKT2gK0jSZFvXXXnFXXa-92-92.png" alt="" />
							<p>账号</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB1INdMHNv1gK0jSZFFXXb0sXXa-92-92.png" alt="" />
							<p>租号</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB1Dk4KHO_1gK0jSZFqXXcpaXXa-92-92.png" alt="" />
							<p>代练</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB178tSHRr0gK0jSZFnXXbRRXXa-92-92.png" alt="" />
							<p>礼包</p>
						</a></li>
				</ul>
			</div>
			<!--游戏币、道具、首充号、充Q币、充值、陪练、端游、新游内测8个盒子的区域-->
			<div class="eight-services" id="carousel-div1">
			
				<ul class="flex-horizontal">
					<li><a href="">
							<img src="indexImg/TB1kvcbFUY1gK0jSZFCXXcwqXXa-96-96.png" alt="" />
							<p>游戏币</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB1JFD_FUH1gK0jSZSyXXXtlpXa-96-96.png" alt="" />
							<p>道具</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB1hfcbFUY1gK0jSZFCXXcwqXXa-96-96.png" alt="" />
							<p>首充号</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB1jvcbFUY1gK0jSZFCXXcwqXXa-96-96.png" alt="" />
							<p>充Q币</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB1bHFXIkL0gK0jSZFAXXcA9pXa-96-96.png" alt="" />
							<p>充值</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB18MU2H1L2gK0jSZPhXXahvXXa-96-96.png" alt="" />
							<p>陪练</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB1vEaahsKfxu4jSZPfXXb3dXXa-96-96.png" alt="" />
							<p>端游</p>
						</a></li>
					<li><a href="">
							<img src="indexImg/TB1SaU.H7P2gK0jSZPxXXacQpXa-96-96.png" alt="" />
							<p>新游内测</p>
						</a></li>
				</ul>
				<button class="prevLi">
					&lt;
				</button>
				<button class="nextLi">
					&gt;
				</button>
				
			</div>
		</div>
		<!--热门游戏区域div盒子-->
		<div class="hot-games">
			<div class="games-h-title"><strong>热门游戏</strong></div>
			<ul class="flex-horizontal flex-justify-space-around">
				<li>
					<a href="">
						<img src="indexImg/83d3da00-48f7-4de7-86d0-35de696a040a.jpg" alt="" />
						<p>天谕</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="indexImg/9c3d33dc-f8df-46f3-83bd-d9365446c56f.jpg" alt="" />
						<p>王神</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="indexImg/8b3b643b-70a1-4204-b0d1-3ca056c86373.jpg" alt="" />
						<p>王者荣耀</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="indexImg/337fb0b4-3c44-4532-90f7-58fbb95361ef.jpg" alt="" />
						<p>和平精英</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="indexImg/bb712d01-6c11-4376-b813-e8e57ba11c14.jpg" alt="" />
						<p>梦幻西游</p>
					</a>
				</li>
			</ul>
			<ul class="flex-horizontal flex-justify-space-around">
				<li>
					<a href="">
						<img src="indexImg/86aae875-f7c1-4768-942a-23001092c223.png" alt="" />
						<p>地下城与勇士DNF</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="indexImg/7db3cf9b-14c4-4a7c-8935-9830aab268d9.jpg" alt="" />
						<p>万国觉醒</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="indexImg/1878dd49-d6f3-43e4-a592-b1a2f2eee93f.jpg" alt="" />
						<p>三国志战略版</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="indexImg/55e2a5c1-24f3-431c-849b-1673cc1b2572.jpg" alt="" />
						<p>幻书启世录</p>
					</a>
				</li>
				<li>
					<a href="">
						<img src="indexImg/75f490dc-50b9-46d6-a55d-0c854f356afb.jpg" alt="" />
						<p>三国杀</p>
					</a>
				</li>
			</ul>
		</div>
		<!--游戏第二个轮播图区域div盒子-->
		<div class="games-slide-list">
			<div id="indexImgDiv">
	            <div class="rotateX01">
	                <div class="indexImg">
	                	<a href=""><img src="indexImg/O1CN01DPcHh91K3xtOJH7JD_!!6000000001109-2-tps-690-260.png" alt="" /></a>
	                </div>
	                <div class="indexImg">
	                	<a href=""><img src="indexImg/O1CN01DPcHh91K3xtOJH7JD_!!6000000001109-2-tps-690-260.png" alt="" /></a>
	                </div>
	                <div class="indexImg">
	                	<a href=""><img src="indexImg/O1CN01DPcHh91K3xtOJH7JD_!!6000000001109-2-tps-690-260.png" alt="" /></a>
	                </div>
	                <div class="indexImg">
	                	<a href=""><img src="indexImg/O1CN01DPcHh91K3xtOJH7JD_!!6000000001109-2-tps-690-260.png" alt="" /></a>
	                </div>
	               
	            </div>
	            <div class="bottomArrow">
	                <ul></ul>
	            </div>
	        </div>
		</div>
		<!--两张图片并列一起排列的区域div，限时秒杀字样-->
		<div class="limit-time-to-buy"> 
			<div>
				<a href="">
					<img src="indexImg/TB1giKAH1L2gK0jSZFmXXc7iXXa-340-140.png" alt="" />
				</a>
			</div>
			<div>
				<a href="">
					<img src="indexImg/TB12CKCHYj1gK0jSZFuXXcrHpXa-340-140.png" alt="" />
				</a>
			</div>
			
			
		</div>
		<!--推荐商品区域div-->
		<div class="games-recommendation">
			<div class="games-h-title">
				<strong>推荐商品</strong>
			</div>
			<div class="games-nav-list">
				<ul>
					<li>
						<a href="">天谕</a>
						<a href="">王神</a>
						<a href="">王者荣耀</a>
						<a href="">和平精英</a>
						<a href="">梦幻西游</a>
						<a href="">地下城与勇士DNF</a>
						<a href="">万国觉醒</a>
						<a href="">三国志战略版</a>
						<a href="">幻书启世录</a>
						<a href="">三国杀</a>
						
					</li>
				</ul>
			</div>
		</div>
		<!--商品基本分类10个类区域结束-->
		<!--推荐商品--多个商品展示的区域开始-->
		<div class="more-games-goods">
			<div id="notice-bar">
				<div id="fixed-goods-notices">
					<div class="clearfix flex-justify-center"> <!--此处的这个div用以进行统一管理下面的子元素div，方便在上一个父元素进行固定定位时让后代子元素的宽度不会太大，位置不会散列开来-->
						<div id="notices">
							<a href="">公告：<strong>【大理寺发布】交易猫正义铁拳下违法交易者“插翅难逃”</strong></a>
						</div>
						<div class="colum-row-show-games-goods flex-justify-space-around">
							<strong class="column-show-games-goods" style="font-size: 3rem; vertical-align: middle;">
								☷
							</strong>
							<strong class="row-show-games-goods" style="font-size: 4rem;">
								&equiv;
							</strong>
						</div>
					</div>
				</div>
			</div>
			<div id="more-games-goods-show">
				<ul class="more-games-goods-show">
					<li>
						<a href="">
							<div class="goods-background-image"></div>
							<div class="goods-type">
								<strong class="goods-account-number">账号</strong>
								<span class="goods-account-description">【65级】3.9w灵珑潜力巨大战力每天加</span>
							</div>
							<div class="goods-type">
								<sub>
									网易账号
								</sub>
								<sub>
									烟雨沧澜-长歌行
								</sub>
							</div>
							<div class="goods-price"><sub>￥</sub>1181</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="goods-background-image"></div>
							<div class="goods-type">
								<strong class="goods-account-number">账号</strong>
								<span class="goods-account-description">【65级】3.9w灵珑潜力巨大战力每天加</span>
							</div>
							<div class="goods-type">
								<sub>
									网易账号
								</sub>
								<sub>
									烟雨沧澜-长歌行
								</sub>
							</div>
							<div class="goods-price"><sub>￥</sub>1920</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="goods-background-image"></div>
							<div class="goods-type">
								<strong class="goods-account-number">账号</strong>
								<span class="goods-account-description">【65级】3.9w灵珑潜力巨大战力每天加</span>
							</div>
							<div class="goods-type">
								<sub>
									网易账号
								</sub>
								<sub>
									烟雨沧澜-长歌行
								</sub>
							</div>
							<div class="goods-price"><sub>￥</sub>1653</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="goods-background-image"></div>
							<div class="goods-type">
								<strong class="goods-account-number">账号</strong>
								<span class="goods-account-description">【65级】3.9w灵珑潜力巨大战力每天加</span>
							</div>
							<div class="goods-type">
								<sub>
									网易账号
								</sub>
								<sub>
									烟雨沧澜-长歌行
								</sub>
							</div>
							<div class="goods-price"><sub>￥</sub>1949</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="goods-background-image"></div>
							<div class="goods-type">
								<strong class="goods-account-number">账号</strong>
								<span class="goods-account-description">【65级】3.9w灵珑潜力巨大战力每天加</span>
							</div>
							<div class="goods-type">
								<sub>
									网易账号
								</sub>
								<sub>
									烟雨沧澜-长歌行
								</sub>
							</div>
							<div class="goods-price">rererer</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="goods-background-image"></div>
							<div class="goods-type">
								<strong class="goods-account-number">账号</strong>
								<span class="goods-account-description">【65级】3.9w灵珑潜力巨大战力每天加</span>
							</div>
							<div class="goods-type">
								<sub>
									网易账号
								</sub>
								<sub>
									烟雨沧澜-长歌行
								</sub>
							</div>
							<div class="goods-price">rererer</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="goods-background-image"></div>
							<div class="goods-type">
								<strong class="goods-account-number">账号</strong>
								<span class="goods-account-description">【65级】3.9w灵珑潜力巨大战力每天加</span>
							</div>
							<div class="goods-type">
								<sub>
									网易账号
								</sub>
								<sub>
									烟雨沧澜-长歌行
								</sub>
							</div>
							<div class="goods-price">rererer</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="goods-background-image"></div>
							<div class="goods-type">
								<strong class="goods-account-number">账号</strong>
								<span class="goods-account-description">【65级】3.9w灵珑潜力巨大战力每天加</span>
							</div>
							<div class="goods-type">
								<sub>
									网易账号
								</sub>
								<sub>
									烟雨沧澜-长歌行
								</sub>
							</div>
							<div class="goods-price">rererer</div>
						</a>
					</li>
				</ul>
				
			</div>
		</div>
		<button type="button" onclick="location.href='shopping.html'">to shopping.html</button>
		<!--rocket-animation-div-area，点击回到顶部时出现-火箭上升运动的动画效果-->
		<div id="fixedPicture">
			<img width="10vw" height="auto" src="indexImg/火箭01.png" alt="火箭--回到顶部" />
		</div>
	</section>
	<!--主体部分区域section结束-->
	
	<!--
		页面底部footer开始
		含有回到顶部、个人中心的固定定位的div
	-->
	<footer id="games-footer-area">
		<!--<div id="show-games-bottom">mouserover</div>-->
		<div id="games-bottom-fixed">
			<div>
				<ul>
					<li id="backTop01">
						<a href="javascript:;">
							<img src="indexImg/TB18MU2H1L2gK0jSZPhXXahvXXa-96-96.png" alt="" />
							<p>ToTop</p>
						</a>
					</li>
					<li>
						<a href="shopping.html">
							<img src="indexImg/TB1bHFXIkL0gK0jSZFAXXcA9pXa-96-96.png" alt="" />
							<p>Buy</p>
						</a>
					</li>
					<li>
						<a href="publishGoods.html">
							<img src="indexImg/TB178tSHRr0gK0jSZFnXXbRRXXa-92-92.png" alt="" />
							<p>Publishp</p>
						</a>
					</li>
					<li>
						<a href="userMessage.html">
							<img src="indexImg/TB1cPNIHKT2gK0jSZFvXXXnFXXa-92-92.png" alt="" />
							<p>Message</p>
						</a>
					</li>
					<li>
						<a href="userCenter.html">
							<img src="indexImg/TB1INdMHNv1gK0jSZFFXXb0sXXa-92-92.png" alt="" />
							<p>Mine</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
	</footer>
	
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<!--<script src="indexJs/div-loading.js"></script>-->
	<script src="indexJs/index1.js" type="text/javascript"></script>
	<!--the javascript file of the first carousel area-->
	<script src="indexJs/carousel01.js"></script>
	<!--the javascript file of the second carousel area-->
	<script src="indexJs/carousel02.js"></script>
	<script src="indexJs/scrollToTopAnimation.js"></script>
	<!--动画加载效果在页面完全加载好后才消失-->
	<script src="indexJs/hideLoadingDiv-after.js"></script>
</body>
</html>